<template>
    <div class="print-template">
        <div class="header">
            <img src="@/assets/wl/shunfenglogo.png"  alt="顺丰速运标志" style="width: 60px; height: 60px;">
            <div class="company-info">
                <span>EXPRESS</span>
                <span>顺丰速运</span>
            </div>
            <div class="tracking-number">
                SF {{ order.waybillNo }}
            </div>
        </div>
        <div class="qr-code-section">
            <img :src="generateQRCode(order.waybillNo)" alt="二维码" style="width: 100px; height: 100px;">
            <div class="signature-notes">
                <div class="signature">
                    签名 Signature
                    <hr>
                </div>
                <div class="notes">
                    备注 Notes
                    <hr>
                </div>
            </div>
        </div>
        <div class="customer-contact">
            客户联
            <span>95338</span>
            <a href="http://www.sf-express.com">www.sf-express.com</a>
        </div>
        <div class="bottom-section">
            <div class="sf-logo">
                <img src="https://placehold.co/60x60" alt="SF标志" style="width: 60px; height: 60px;">
            </div>
            <div class="remark">
                备注
                <hr>
            </div>
            <div class="tracking-number-bottom">
                运单号 SF {{ order.waybillNo }}
            </div>
        </div>
    </div>
</template>

<script setup name="WlOrderPrint">
import { ref } from 'vue';
import QRCode from 'qrcode';

const generateQRCode = async (waybillNo) => {
    const qrCodeDataUrl = await QRCode.toDataURL(waybillNo);
    return qrCodeDataUrl;
};

const order = ref({
    waybillNo: '154 617 680 4249',
    // 其他订单信息...
});
const printExpressSheet = () => {
    // 生成打印内容
    const printContent = `
        <div class="print-template">
            <div class="header">
                <img src="@/assets/wl/shunfenglogo.png" alt="顺丰速运标志" style="width: 60px; height: 60px;">
                <div class="company-info">
                    <span>EXPRESS</span>
                    <span>顺丰速运</span>
                </div>
                <div class="tracking-number">
                    SF ${order.value.waybillNo}
                </div>
            </div>

            <div class="qr-code-section">
                <img :src="${generateQRCode(order.value.waybillNo)}" alt="二维码" style="width: 100px; height: 100px;">
                <div class="signature-notes">
                    <div class="signature">
                        签名 Signature
                        <hr>
                    </div>
                    <div class="notes">
                        备注 Notes
                        <hr>
                    </div>
                </div>
            </div>
            <div class="customer-contact">
                客户联
                <span>95338</span>
                <a href="http://www.sf-express.com">www.sf-express.com</a>
            </div>
            <div class="bottom-section">
                <div class="sf-logo">
                    <img src="https://placehold.co/60x60" alt="SF标志" style="width: 60px; height: 60px;">
                </div>
                <div class="remark">
                    备注
                    <hr>
                </div>
                <div class="tracking-number-bottom">
                    运单号 SF ${order.value.waybillNo}
                </div>
            </div>
        </div>
    `;

    // 打开一个新的窗口来打印
    const printWindow = window.open('', '_blank', 'width=800,height=600');
    printWindow.document.write(`
        <html>
        <head>
            <title>快递单打印</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                }
                .print-template {
                    font-family: Arial, sans-serif;
                }
                .header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                }
                .company-info {
                    margin-left: 10px;
                }
                .tracking-number {
                    font-size: 20px;
                    font-weight: bold;
                    margin-left: auto;
                }
                .qr-code-section {
                    display: flex;
                    margin-bottom: 20px;
                }
                .signature-notes {
                    margin-left: 20px;
                }
                .signature, .notes {
                    margin-bottom: 10px;
                }
                .customer-contact {
                    background-color: #f00;
                    color: white;
                    padding: 5px;
                    margin-bottom: 20px;
                }
                .bottom-section {
                    border-top: 1px dashed black;
                    padding-top: 20px;
                    display: flex;
                    align-items: center;
                }
                .remark {
                    margin-left: 20px;
                    width: 200px;
                }
                .tracking-number-bottom {
                    margin-left: auto;
                }
            </style>
        </head>
        <body>
            ${printContent}
        </body>
        </html>
    `);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

onMounted(() => {
    printExpressSheet();
})

</script>

<style scoped>
.print-template {
    font-family: Arial, sans-serif;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.company-info {
    margin-left: 10px;
}

.tracking-number {
    font-size: 20px;
    font-weight: bold;
    margin-left: auto;
}

.qr-code-section {
    display: flex;
    margin-bottom: 20px;
}

.signature-notes {
    margin-left: 20px;
}

.signature, .notes {
    margin-bottom: 10px;
}

.customer-contact {
    background-color: #f00;
    color: white;
    padding: 5px;
    margin-bottom: 20px;
}

.bottom-section {
    border-top: 1px dashed black;
    padding-top: 20px;
    display: flex;
    align-items: center;
}

.remark {
    margin-left: 20px;
    width: 200px;
}

.tracking-number-bottom {
    margin-left: auto;
}
</style>
